<template>
	<view class="body">
		<view class="tips">资料未完善，点击完善资料（如已完成请忽略）</view>
		<view class="title">个人信息：</view>
		<view class="content head">
			<view class="content-l">
				<view><text class="name">姓名:</text><text>{{readInfo.name}}</text></view>
				<view><text class="name">手机号:</text><text>{{readInfo.phone}}</text></view>
				<view><text class="name">证件号:</text><text>{{readInfo.idCardNo}}</text></view>
			</view>
			<image class="logo"
				src=""
				mode="widthFix"></image>
		</view>
		<view class="title">报读信息：<text class="c-blue">报读流程</text></view>
		<view class="content">
			<view class="content-t clearfix">[{{readInfo.gVal.name}}]{{readInfo.iVal.name}}</view>
			<view class="liveBox"></view>
			<view class="content-l clearfix">
				<view><text class="name">专业：</text><text>{{readInfo.sVal.name}}</text></view>
				<view><text class="name">学号：</text><text></text></view>
				<view><text class="name">学习形式：</text><text>函授</text></view>
				<view><text class="name">我的状态：</text><text>意向学员</text><uni-icons type="help" size="40rpx"></uni-icons>
				</view>
				<view><text class="name">报读类型：</text><text>{{readInfo.eVal.name}}</text></view>
			</view>
			<view class="go-course">去试听课程<uni-icons type="right" size="30rpx" color="#3f9df2"></uni-icons></view>
			<view class="content-b cl">
				<label class="isDefault">
					<view class="radio"></view>
					<text>身份使用中</text>
				</label>
				<view class="btn" @click="navTo('/pages/giftPackage/giftPackage')">我要缴费</view>
			</view>
		</view>
		<navbar :active="0"></navbar>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				readInfo: {
					name:'', // 姓名
					idCardNo:'', // 身份证
					phone: '', // 手机号
					eVal:{}, // 报读类型
					gVal:{}, // 年级
					lVal:{}, // 层次
					iVal:{}, // 院校
					sVal:{}, // 专业
					qVal:{}, // 县区
				}
			}
		},
		onShow() {
			this.readInfo = this.$core.getCache('read_info')
		},
		methods: {
			navTo(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content-b {
		display: flex;
		align-items: center;
		margin-top: 40rpx;
		justify-content: space-between;

		.isDefault {
			display: flex;
			align-items: center;
			color: #f66768;

			.radio {
				margin-right: 10rpx;
				border: 1px solid #f66768;
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				position: relative;

				&:after {
					content: "";
					background-size: 100%;
					background-color: #f66768;
					border-radius: 50%;
					display: inline-block;
					height: 20rpx;
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					width: 20rpx;
				}
			}
		}

		.btn {
			background: #e85b57;
			border: 0;
			border-radius: 5rpx;
			color: #fff;
			font-size: 28rpx;
			height: 60rpx;
			line-height: 60rpx;
			padding: 0 30rpx;
		}
	}



	.go-course {
		color: #3f9df2;
		font-size: 28rpx;
		margin-top: 40rpx;
		text-decoration: underline;
	}

	.tips {
		background-color: #fdf0e1;
		padding: 20rpx 40rpx;
		color: #eead60;
	}

	.body {
		background-color: #f6f6f6;
		min-height: 100vh;
	}

	.title {
		color: #999;
		font-size: 28rpx;
		padding: 30rpx 20rpx 20rpx 20rpx;
		justify-content: space-between;
		display: flex;
	}

	.content {
		background-color: #fff;
		padding: 20rpx;
	}

	.head {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.logo {
		width: 120rpx;
	}

	.content-l {
		font-size: 28rpx;

		.name {
			line-height: 1.5;
			color: #999;
			margin-right: 10rpx;
		}
	}

	.content-t {
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.c-blue {
		color: #00aeef;
	}

	.liveBox {
		border-bottom: 1px solid #eee;
	}
</style>